<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1;IE=edge">
    <meta name="viewport" content="user-scalable=no">
    <!-- vue2 -->
    <script src="/examples/js/vue.min.js"></script>
    <!-- 示例演示-公共样式 -->
    <link rel="stylesheet" href="/examples/css/railView.css" type="text/css" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- RailUnit 样式 -->
    <link rel="stylesheet" href="/RailUnit/RailUnit.umd.css" type="text/css">
    <!-- RailUnit 插件 -->
    <script type="text/javascript" src="/RailUnit/RailUnit.umd.js" charset="utf-8"></script>
    <script type="text/javascript" src="/examples/js/jquery-2.1.4.min.js"></script>
    <style>
        .box-card {
            width: 35%;
            position: absolute;
            left: 1vw;
            top: 50px;
        }
        .clearfix {
            font-size: 18px;
        }
        .el-card__header {
            padding: 15px;
            background-color: #f5f5f5;
        }
        .close-btn {
            float: right; 
            padding: 0; 
            font-size: 25px;
            color: #666666;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="buttom-container">
            <el-button type="info" @click="dialogFormVisible = !dialogFormVisible">构件纹理</el-button>
        </div>
        <div id="viewer" style="width:100%;height:100%;position:relative;float:left"></div>
        <el-card class="box-card" v-show="dialogFormVisible">
            <div slot="header" class="clearfix">
              <span>设置贴片</span>
              <el-button class="close-btn" type="text" @click="dialogFormVisible = !dialogFormVisible">×</el-button>
            </div>
            <div class="card-container">
                <el-form 
                    ref="form" 
                    :model="formValues" 
                    label-width="100px"
                >
                    <el-form-item label="贴片路径：">
                        <el-input v-model="formValues.path"></el-input>
                    </el-form-item>
                    <el-form-item label="贴图方式：">
                        <el-select v-model="formValues.mapMode" placeholder="请选择贴图方式">
                            <el-option label="平铺" value="clamp"></el-option>
                            <el-option label="重复" value="repeat"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="缩放比例：">
                        <el-input-number v-model="formValues.scale" :min="0" :max="1" :step="0.1" label="请输入缩放比例"></el-input-number>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="small" @click="handleCancel">取消贴图</el-button>
                        <el-button size="small" type="primary" @click="handleTexture">添加贴图</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
    <script id="viewerStartup" type="module">
        import { urlToCanvas } from '/examples/js/base64.js'
         const vm = new Vue({
            el: '#app',
            data: {
                bimViewer: null,
                dialogFormVisible: true,
                imgUrl: '/examples/img/textureMap.png',
                formValues: {
                    path: '',
                    mapMode: 'clamp',
                    scale: 1
                }
            },
            mounted () {
                this.bimViewerFn()
                this.changeImgTobase64()
            },
            methods: {
                // 初始化模型
                bimViewerFn() {
                    this.bimViewer = new MyViewer({
                        serverUrl: '/RailUnit/',
                        containerElement: document.getElementById('viewer'),
                        nodeVisible: false
                    })
                    this.bimViewer.loadModel2('jianzhu')
                },
                handleTexture() {
                    const { path, mapMode, scale } = this.formValues
                    this.bimViewer.setTextureForFace(ids, path, mapMode, scale);
                },
                handleCancel() {
                    this.bimViewer.unsetSolidsTexture(ids);
                    console.log(model.unsetSolidsTexture(ids));
                },
                changeImgTobase64() {
                    console.log( urlToCanvas(this.imgUrl), ' this.urlToCanvas');
                    urlToCanvas(this.imgUrl).then(res => {
                        let code = res.split(',')
                        console.log(code, '输出图片base64')
                        // 输出图片base64
                        this.formValues.path = res
                    }),function(err) {
                        // 输出图片错误信息
                        console.log(err, '输出图片错误信息')
                    }
                }
            }
        })
    </script>
</body>
</html>
